<template>
  <div ref="waterLiquidRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";

// 接收参数
const props = defineProps({
  data: Object
});
const value = props.data;
// 横坐标
// const value = apiData.data;
// 图表绘制逻辑
const waterLiquidRef = ref<HTMLDivElement | null>(null);
const waterLiquidRefInstance = ref<echarts.ECharts | null>(null);
const initTrendOption = ref<echarts.EChartOption>({});

let angle = 0; //角度，用来做简单的动画效果的
const getCirlPoint = (x0, y0, r, angle) => {
  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  return {
    x: x1,
    y: y1
  };
};

const draw = () => {
  angle = angle + 3;
  let option = waterLiquidRefInstance.value.getOption();
  waterLiquidRefInstance.value.setOption(option);
};

const timer = ref<any>(null);
const startTimer = () => {
  timer.value = setInterval(draw, 100);
};

initTrendOption.value = {
  // backgroundColor: "#020f18",
  title: [
    {
      text: "总执行率",
      x: "50%",
      y: -3,
      textAlign: "center",
      textStyle: {
        fontSize: "20",
        fontWeight: "500",
        color: "#fff",
        textAlign: "center"
      }
    },
    {
      text: (value * 100).toFixed(2) + "%",
      left: "50%",
      top: "30%",
      textAlign: "center",
      textStyle: {
        fontSize: "24",
        fontWeight: "400",
        color: "#fff",
        textAlign: "center",
        textBorderColor: "rgba(0, 0, 0, 0)",
        textShadowColor: "#000",
        textShadowBlur: "0",
        textShadowOffsetX: 0,
        textShadowOffsetY: 1
      }
    }
  ],
  series: [
    {
      name: "内线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        // console.log(Math.min(api.getWidth(), api.getHeight()) / 2.3);
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2.3,
            startAngle: ((0 + angle) * Math.PI) / 180,
            endAngle: ((90 + angle) * Math.PI) / 180
          },
          style: {
            stroke: "#40c3c8",
            fill: "transparent",
            lineWidth: 2
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "内线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2.3,
            startAngle: ((180 + angle) * Math.PI) / 180,
            endAngle: ((270 + angle) * Math.PI) / 180
          },
          style: {
            stroke: "#40c3c8",
            fill: "transparent",
            lineWidth: 2
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "外线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2.1,
            startAngle: ((270 + -angle) * Math.PI) / 180,
            endAngle: ((40 + -angle) * Math.PI) / 180
          },
          style: {
            stroke: "#40c3c8",
            fill: "transparent",
            lineWidth: 2
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "外线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2.1,
            startAngle: ((90 + -angle) * Math.PI) / 180,
            endAngle: ((220 + -angle) * Math.PI) / 180
          },
          style: {
            stroke: "#40c3c8",
            fill: "transparent",
            lineWidth: 2
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "线头点",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;
        let point = getCirlPoint(x0, y0, r, 90 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#40c3c8", //绿
            fill: "#40c3c8"
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "线头点",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;
        let point = getCirlPoint(x0, y0, r, 270 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#40c3c8", //绿
            fill: "#40c3c8"
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      type: "liquidFill",
      radius: "78%",
      center: ["50%", "50%"],
      color: ["#40c3c8", "#40c3c8", "#40c3c8"], //水波
      data: [0.5, 0.5, 0.5], // data个数代表波浪数
      label: {
        normal: {
          show: false
        }
      },
      backgroundStyle: {
        borderWidth: 1,
        color: "transparent"
      },
      outline: {
        show: true,
        itemStyle: {
          borderColor: "#40c3c8",
          borderWidth: 2
        },
        borderDistance: 1
      }
    }
  ]
};

const initWaterLiquid = () => {
  if (waterLiquidRef.value) {
    waterLiquidRefInstance.value = markRaw(echarts.init(waterLiquidRef.value));
    waterLiquidRefInstance.value.setOption(initTrendOption.value, true);
  }
};

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initWaterLiquid();
  startTimer();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (waterLiquidRefInstance.value) {
      waterLiquidRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (waterLiquidRefInstance.value) {
    waterLiquidRefInstance.value.dispose();
  }
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style scoped lang="scss"></style>
